<template>
  <div>
    <jdf-tinymce
      v-if="!allFieldsReadonly"
      id="myTinymce"
      v-model="data.text"
      space-code="default"
      is-show-url
      :biz-id="taskInfo.processInstanceId"
      :headers="headers"
    ></jdf-tinymce>
    <div v-else v-html="data.text"></div>
  </div>
</template>

<script>
export default {
  name: 'TinymceInfo',
  props: {
    // 基本信息业务表单数据
    formData: {
      type: Object,
      default: () => ({}),
    },
    configData: {
      type: Object,
      default: () => ({}),
    },
    // 任务信息
    taskInfo: {
      type: Object,
      default: () => ({}),
    },
    // 表单列信息（只读可编辑状态、是否必填等配置）
    formFieldConfig: {
      type: Array,
      default: () => [],
    },
    // 所有字段都是只读
    allFieldsReadonly: {
      type: Boolean,
      default: false,
    },
    // 是否运维端打开
    isMaintain: {
      type: Boolean,
      default: false,
    },
    // 流程模板编码
    processDefinitionKey: String,
    // 环节编码
    nodeId: String,
    // 是否已办
    isDone: Boolean,
  },
  data() {
    return {
      headers: {
        tokenKey: 'Authorization',
        tokenValue: sessionStorage.getItem('biz-access-token'),
      },
      // 数据对象
      data: {
        text: '',
      },
    };
  },
  computed: {
    // 页面是否可编辑
    isPageEditable() {
      return this.isMaintain || (!this.isDone && !this.allFieldsReadonly);
    },
  },
  watch: {
    formData: {
      handler(val) {
        this.data.text = val.text;
      },
      deep: true,
      immediate: true,
    },
    data: {
      handler(val) {
        this.$emit('change', val);
      },
      deep: true,
    },
  },
};
</script>
